<template>
  <div>
    <h4>查看成绩</h4>
    <el-divider/>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="等待教师批改" name="3"/>
      <el-tab-pane label="已完成" name="4"/>
      <el-tab-pane label="所有" name="1000"/>
    </el-tabs>
    <el-container>
      <el-main>
        <!-- 动态表格展示考试数据 -->
        <el-table
            :data="examList"
            style="width: 100%; margin-top: 20px;"
            border
            stripe
            v-loading="loading"
        >
        <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="id" label="考试ID" width="300px" align="center" show-overflow-tooltip/>
        <el-table-column prop="tesPaperName" label="试卷名称" width="150" align="center"/>
        <el-table-column prop="subject" label="科目" width="120" align="center"/>
        <el-table-column prop="studentName" label="学生姓名" width="120" align="center"/>
        <el-table-column prop="objectiveTestScores" label="客观题得分" width="120" align="center"/>
        <el-table-column prop="subjTestScores" label="主观题得分" width="120" align="center"/>
        <el-table-column prop="totalScores" label="总得分" width="120" align="center"/>
        <el-table-column prop="testStartTime" label="考试开始时间" width="270" align="center"/>
        <el-table-column prop="endTime" label="考试结束时间" width="270" align="center"/>
        <el-table-column prop="timeTaken" label="用时(秒)" width="100" align="center"/>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleViewDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'; // 引入 ref 和 onMounted
import {queryStudentPaper} from '../api/sysStudentAnswerSheet/sysStudentAnswerSheet.js';
import {ElMessage} from 'element-plus';
import { useRouter } from 'vue-router';
import 'dayjs/locale/zh-cn';

const activeName = ref('3');
const router = useRouter();
// 1. 使用 ref 将 examList 声明为响应式数组
const examList = ref([]);
const loading = ref(false); // 添加加载状态

watch(activeName, (newValue) => {
  query.state = Number(newValue);
  getData();
})

// 查询条件
const query = {
  studentId: undefined, // 假设这里会从某个地方获取，比如路由参数或用户信息
  state: 3,
};

// 获取原始数据与清洗数据
const getData = () => {
  loading.value = true; // 开始加载
  queryStudentPaper(query).then(res => {
    console.log(res);
    // 2. 检查返回的 code 并处理数据
    if (res.code === 200 && res.data) {
      // 直接将 res.data (它是一个数组) 赋值给 examList.value
      examList.value = res.data;
    } else {
      ElMessage.warning(res.msg || '未查询到数据');
      examList.value = []; // 如果没有数据，清空列表
    }
  }).catch(e => {
    console.error("API请求出错:", e);
    ElMessage.error("查询失败: " + (e.message || e));
    examList.value = []; // 出错时也清空列表
  }).finally(() => {
    loading.value = false; // 结束加载
  });
};

// 查看详情的示例方法
const handleViewDetail = (row) => {
  ElMessage.info(`查看试卷 "${row.tesPaperName}" 的详情`);
  console.log('当前行数据:', row);
  router.push({
    path: '/main/takeExam',
    query: {id: row.id,s: "vivw"}
  })
};

// 3. 使用 onMounted 生命周期钩子来调用 getData
// 这确保了在组件挂载到 DOM 后才执行数据请求
onMounted(() => {
  // 在实际应用中，studentId 可能需要从登录信息或路由参数中获取
  // 例如: query.studentId = store.state.user.id;
  getData();
});
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
